import "./Student.scss"
import { Button, Form, Space, Table } from 'antd';
import service from "../../../api/index"
import React, { useEffect, useState } from 'react';
import { useNavigate } from "react-router";
import { store } from '../../../store/index'


const Student = () => {
    var [data, setData] = useState();//表单数据
    let navigator = useNavigate()

    const { form }: any = Form.useForm()

    var look = (b: any) => {
        console.log(b);
        // form.setFieldsValue(b)
    }

    var add = () => {
        console.log('111');
        navigator('/index/studentlook')
    }

    var bianji = (b: any) => {
        console.log(b);
        ////触发action 
        store.dispatch({ type: 'BIANJI', payload: b })
        //查看数据 
        var dat = store.getState().student
        console.log(dat)
        navigator('/index/studentlook')
    }

    const columns = [
        {
            title: '名字',
            dataIndex: 'name',
        },
        {
            title: '班级',
            dataIndex: 'class',
        },
        {
            title: '性别',
            dataIndex: 'sex',
        },
        {
            title: '学号',
            dataIndex: 'num',
        },
        {
            title: '联系电话',
            dataIndex: 'tel',
        },
        {
            title: '电子邮件',
            dataIndex: 'email',
        },
        {
            title: '入学时间',
            dataIndex: 'time',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (a: any, b: any, c: any) => (
                <Space size="middle">
                    <div className="caozuo"><span onClick={() => { look(b) }}>查看</span>&nbsp;&nbsp;&nbsp;<span onClick={() => { bianji(b) }}>编辑</span></div>
                </Space>
            ),
        },
    ];

    var studentlist = async () => {
        var res = await service.student.student_list()
        setData(res.data)
        // console.log(res.data);
    }
    useEffect(() => {
        studentlist()//首次加载获取列表数据
    }, [])

    // 新增学生信息
    var studentadd = () => {

    }

    const [selectionType] = useState<'checkbox' | 'radio'>('checkbox');
    return (
        <div className='student'>
            <div className='top'>
                <div className="left">学生列表</div>
                <div className="right">首页&gt;学生列表</div>
            </div>
            <div className='btns'>
                <div className="left"> <Button type="primary" className='Primary'>删除选择</Button>&nbsp;&nbsp;&nbsp;&nbsp;<Button type="primary" className='Primary1'>刷新</Button></div>
                <div className="right"><Button type="primary" className='Primary2'>导出</Button>&nbsp;&nbsp;&nbsp;&nbsp;<Button type="primary" className='Primary3' onClick={() => { add() }}>新增学生</Button></div>
            </div>
            <div className="table">
                <Table
                    rowSelection={{
                        type: selectionType,
                        // ...rowSelection
                    }}
                    columns={columns}
                    dataSource={data}
                />
            </div>
        </div>
    );
};

export default Student;